<template>
    <div class="wrap">
        <div class="title">耗材监测</div>
        <div class="content" v-if="HdData.length > 0">
            <div class="every-item">
                <div class="every-item-title">中心抽(大)</div>
                <MaterialRing :info="HdDataMap['中心抽大'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['中心抽大'][0]"></MaterialBattery>
                </div>
            </div>

            <div class="every-item">
                <div class="every-item-title">擦手纸巾盒</div>
                <MaterialRing :info="HdDataMap['擦手纸巾盒'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['擦手纸巾盒'][0]"></MaterialBattery>
                </div>
            </div>


            <div class="every-item">
                <div class="every-item-title">中心抽(小)</div>
                <MaterialRing :info="HdDataMap['中心抽小'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['中心抽小'][0]"></MaterialBattery>
                </div>
            </div>

            <div class="every-item">
                <div class="every-item-title">大卷纸巾盒</div>
                <MaterialRing :info="HdDataMap['大卷纸巾盒'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['大卷纸巾盒'][0]"></MaterialBattery>
                </div>
            </div>



            <div class="every-item">
                <div class="every-item-title">中心抽(双)</div>
                <div class="mini-wrap">
                    <MaterialRingMini :info="HdDataMap['中心抽双'][0]"></MaterialRingMini>
                    <div class="bat-wx">
                        <MaterialBatteryMini :info="HdDataMap['中心抽双'][0]"></MaterialBatteryMini>
                    </div>
                </div>
                <div class="mini-wrap">
                    <MaterialRingMini :info="HdDataMap['中心抽双'][1]"></MaterialRingMini>
                    <div class="bat-wx">
                        <MaterialBatteryMini :info="HdDataMap['中心抽双'][1]"></MaterialBatteryMini>
                    </div>
                </div>
            </div>

            <div class="every-item">
                <div class="every-item-title">感应出纸机</div>
                <MaterialRing :info="HdDataMap['感应出纸机'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['感应出纸机'][0]"></MaterialBattery>
                </div>
            </div>



            <div class="every-item">
                <div class="every-item-title">感应皂液器</div>
                <MaterialRing :info="HdDataMap['感应皂液器'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['感应皂液器'][0]"></MaterialBattery>
                </div>
            </div>

            <div class="every-item">
                <div class="every-item-title">智能香黑机</div>
                <MaterialRing :info="HdDataMap['智能香黑机'][0]"></MaterialRing>
                <div class="bat-wx">
                    <MaterialBattery :info="HdDataMap['智能香黑机'][0]"></MaterialBattery>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import MaterialRing from "./MaterialRing.vue"
import MaterialBattery from "./MaterialBattery.vue"
import MaterialRingMini from "./MaterialRingMini.vue"
import MaterialBatteryMini from "./MaterialBatteryMini.vue"
export default {
    props: ["HdData"],
    components: { MaterialRing, MaterialBattery,MaterialRingMini,MaterialBatteryMini },
    data() {
        return {};
    },
    computed: {
        HdDataMap() {
            const retObj = {}
            if (Array.isArray(this.HdData) && this.HdData.length > 0) {
                for (let index = 0; index < this.HdData.length; index++) {
                    const element = this.HdData[index];
                    if (retObj[element.name] === undefined) {
                        retObj[element.name] = [];
                    }
                    retObj[element.name].push({ ...element })
                }
            }
            return retObj
        }
    }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 18px 40px 50px 40px;
    font-size: 18px;
    color: #efeded;

    background-size: contain;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .title {
        font-size: 21px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #DEF1FF;
    }

    .content {
        display: flex;
        height: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: relative;

        &::before {
            content: " ";
            position: absolute;
            width: 2px;
            left: 50%;
            top: 40px;
            bottom: 34px;
            background-color: RGBA(94, 233, 238, 1);
        }

        .every-item {
            width: 45%;
            height: 93px;
            display: flex;
            align-items: center;
        }

        .every-item-title {
            width: 133px;
        }

        .bat-wx {
            height: 100%;
        }
        .mini-wrap{
            display: flex;
        }
    }
}
</style>